<template>
  <div id="details">
    <!-- 顶部导航栏 -->
    <div style="position: fixed;top: 0;width: 100%;z-index:2000">
      <van-nav-bar class="navbar" @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" class="left"/>
        </template>
        <template #title>
          <div class="navTitle">详情页面</div>
        </template>
      </van-nav-bar>
    </div>
    <div id="taskList">
      <div class="profile">
        <!-- 用户的头像 -->
        <van-image 
          round
          fit="cover"
          :src="items.users.img"
          class="img"
          @click="headClick(items.users.name)"
        />
        <!-- 用户的名称 -->
        <h3 class="name">
          {{items.users.name}}
          <!-- 用户的认证图标 -->
          <van-image v-if="items.users.student_identification" :src="require('../../assets/book.png')" class="identifyImg" />
          <van-icon name="manager" v-if="items.users.people_identification" color="#00a8f3"/>
          <van-icon name="shop" v-if="items.users.shop_identification" color="#ff000a"/>
        </h3>
        <!-- 悬赏金额 -->
        <span class="money">￥ {{items.money}}</span>
        <!-- 悬赏人信誉积分 -->
        <div class="credit">
          <van-rate v-model="items.users.credit_score" readonly allow-half void-icon="star" void-color="#eee"/>
        </div>
        <!-- 任务的标题 -->
        <p class="title" v-if="items.title">{{items.title}}</p>
      </div>
      <!-- 悬赏内容 -->
      <div class="content">
        {{items.content}}
      </div>
      <div class="content">
        <van-image v-for="(i,index) in items.imgCount" :key="index" :src="items.img[i]"  class="contentImg"/>
      </div>
      <!-- 判断状态 -->
      <div class="chat" @click="chatClick" v-if=" this.items.users.name != this.userName">
        进入私聊
      </div>
      <div class="accept" @click="acceptClick" v-if="this.items.users.name != this.userName&&!this.items.receiving_user">
        我来接单
      </div>
      <!-- 状态提示 -->
      <van-steps :active="active" active-color="#66cd99" class="steps">
        <van-step>未接单</van-step>
        <van-step>正在进行中</van-step>
        <van-step>已完成</van-step>
      </van-steps>
      <!-- 悬赏人的信息 -->
      <div v-if="this.items.receiving_user">
      <van-cell-group class="userInformation" v-if="this.items.receiving_user&&this.items.receiving_user==this.userName">
        <van-cell title="截止日期至" :value="items.effective_time" />
        <van-cell title="悬赏人昵称" :value="items.users.name" />
        <van-cell title="联系方式" :value="items.users.qq" />
      </van-cell-group>
      </div>
      <!-- 发布人的信息 -->
      <van-cell-group class="userInformation" v-if="this.items.receiving_user&&this.items.users.name == this.userName">
        <van-cell title="截止日期至" :value="items.effective_time" @click="showPicker = true"/>
        <van-cell title="接单人昵称" :value="items.receiving_user.name" />
        <van-cell title="联系方式" :value="items.receiving_user.phone_number" />
        <van-cell title="接单人信誉积分" :value="items.receiving_user.credit_score">
          <template #right-icon>
            <van-rate v-model="items.receiving_user.credit_score" readonly allow-half void-icon="star" void-color="#eee" />
          </template>
        </van-cell>
      </van-cell-group>
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          type="datetime"
          title="修改到期时间至"
          @confirm="onConfirm"
          @cancel="showPicker = false"
          v-model="time"
          :formatter="formatter"
          :min-date="minDate"
        />
      </van-popup>
      <!-- 发布者点击完成任务 -->
      <div class="finished">
        <div class="finishedButton" @click="finished0Click" v-if="this.items.users.name == this.userName&&this.active==1"> 任务完成</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Datails',
  data () {
    return {
      items:{
        users:{img:''},
        receiving_user:{
          name:"",
          credit_score:null
        }
      },

      active: 1,
      minDate: new Date(),
      time: new Date(),
      showPicker: false,
      userName:''
    }
  },
  methods: {
    headClick(name) {
      this.$router.push({
        path: '/user',
        query:{
          name:name
        }
      })
    },
    onClickLeft() {
      this.$router.push('/home')
    },
    chatClick() {
      this.$router.push({path:'/chat',query:{id:this.items.id}})
    },
    acceptClick() {
      this.$dialog.confirm({
        title: '提示',
        message: '确认要接单？',
      })
        .then(() => {
          this.receiving();
        })
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      } else if (type === 'day') {
        return `${val}日`;
      } else if (type === 'hour') {
        return `${val}时`;
      } else if (type === 'minute') {
        return `${val}分`;
      }
    },
    onConfirm() {
      console.log("点击了修改时间")
      this.showPicker = false;
    },
    finished1Click() {
       let params = new URLSearchParams();
      params.append("id",this.items.id);
      this.axios({
          method: "post",
          url: this.$store.state.url+"/order/end",
          headers:{
           'Authorization': localStorage.token
                },
          params
      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {
          console.log(err);
      })
      this.$router.push({
        path: '/finisheddetails',
        query: {
          name:this.items.users.name,
          id:this.items.id
        }
      })
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    finished0Click() {
      console.log("发布者点击了完成任务")
       let params = new URLSearchParams();
      params.append("id",this.items.id);
      this.axios({
          method: "post",
          url: this.$store.state.url+"/order/end",
          headers:{
           'Authorization': localStorage.token
                },
          params
      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {
          console.log(err);
      })
       this.$router.push({
        path: '/finisheddetails',
        query: {
          id:this.items.id
        }
      })
    },
    receiving(){
      let params = new URLSearchParams();
      params.append("id",this.items.id);
      this.axios({
          method: "post",
          url: this.$store.state.url+"/order/receiving",
          headers:{
           'Authorization': localStorage.token
                },
          params
      }).then((res) => {
          window.location.reload();
        console.log(res.data);
      }).catch((err) => {
          console.log(err);
      })
    }
  },
  created(){
    this.userName=JSON.parse(window.localStorage.getItem('user')).name;
    console.log(JSON.parse(window.localStorage.getItem('user')));
    this.axios({
          method: "get",
          url: this.$store.state.url+"/order/"+this.$route.query.id,
      }).then((res) => {
          res.data.data.img  = JSON.parse( res.data.data.img);
          res.data.data.imgCount = Object.keys(res.data.data.img);
          for(var t in res.data.data.imgCount){
            res.data.data.img[t] = "http://picture.105577.xyz/"+res.data.data.img[t];
          }
          res.data.data.users.img = "http://picture.105577.xyz/"+  res.data.data.users.img;
          this.items = res.data.data;
          this.items.users.credit_score = Number(this.items.users.credit_score)/2;
          this.active = res.data.data.order_status;
          this.items.receiving_user.credit_score = Number(this.items.receiving_user.credit_score)/2;
          if(!this.items.receiving_user){
            this.items.receiving_user = {name:''};
          }
        console.log(this.items.receiving_user);
         console.log(this.items.receiving_user.name ==this.userName);
      }).catch((err)=>{
          console.log(err);
      })
  
  }
}
</script>

<style scoped>
  .navbar {
    background: #66cd99;
    box-shadow: 0 2px 5px #cccccc;
    color: #ffffff;
  }
  .left {
    font-size: 20px;
    color: #fff;
  }
  .navTitle {
    color: #fff;
    font-size: 20px
  }
  #taskList {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin-top: 46px;
    overflow: hidden;
    background: #ffffff;
  }
  .profile {
    float: left;
    width: 100%;
    padding-bottom: 10px;
  }
  .img {
    float: left;
    margin: 0 20px 0 0;
    border: 1px solid #cccccc;
    width: 60px;
    height: 60px;
  }
  .name {
    float: left;
    padding: 0;
    margin: 5px 0;
    width: 170px;
    color: #494949;
  }
  .identifyImg {
    width: 18px;
    height: 18px
  }
  .credit {
    float: left;
    width: 170px;
    font-size: 12px;
  }
  .title {
    float: left;
    font-size: 23px;
    padding: 0;
    margin: 0;
    width: 220px;
    font-weight: 510;
  }
  .money {
    position: absolute;
    font-weight: 600;
    font-size: 20px;
    color: #ff000d;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 15px;
  }
  .accept {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    letter-spacing: 2px;
    width: 90px;
    height: 40px;
    border-radius: 10px;
    float: right;
    margin: 15px 5px 5px;
    color: #ffffff;
    background: #66cd99;
  }
  .steps {
    box-sizing: border-box;
    border-top: 8px solid #66cd99;
    padding:5px 50px;
    width: 100%
  }
  .userInformation {
    border-top: 8px solid #66cd99;
    border-bottom: 8px solid #66cd99
  }
  .chat {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    letter-spacing: 2px;
    width: 90px;
    height: 40px;
    border-radius: 10px;
    float: left;
    margin: 15px 5px 5px;
    color: #ffffff;
    background: #66cd99;
  }
  .finished {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 10px;
    background: #ffffff;
  }
  .finishedButton {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    letter-spacing: 2px;
    width: 90px;
    height: 40px;
    border-radius: 10px;
    margin: 15px 5px 5px;
    color: #ffffff;
    background: #66cd99;
  }
</style>